<template>
    <div>
        <el-row class="content-box">
            <div v-if="table.list.length">
                <div :key="index" class="item" v-for="(item,index) in table.list">
                    <el-col :span="6">
                        <el-image :src="item.coverImg"  class="img" @click="goDetail(item)">
                            <div slot="placeholder" class="image-slot">
                                加载中<span class="dot">...</span>
                            </div>
                        </el-image>
                    </el-col>
                    <el-col :span="18" style="padding-left: 16px">
                        <div class="title" @click="goDetail(item)">{{item.title}}</div>
                        <div class="content" @click="goDetail(item)">{{item.intro}}</div>
                        <div class="data">{{item.createTime}}</div>
                    </el-col>
                </div>
            </div>
            <div v-else style="text-align: center">
                暂无数据
            </div>
        </el-row>
        <pagination :limit.sync="table.pageSize" :page.sync="table.page" :total="table.total" @pagination="getList"/>
    </div>
</template>

<script>
    import Api from '@/api/article'
    export default {
        components: {},
        mounted() {
            this.params = this.$route.params
            this.getList()
        },
        watch: {
            $route() {
                this.params = this.$route.params
                this.getList()
            }
        },
        computed: {
        },
        data() {
            return {
                params: {},
                table: {
                    list: [
                        {
                            title: '123434',
                            intro: '做自己的CEO 文/李明 每个人都有自己不同的人生，我们是自己世界里的国王，别人的人生不代表自己的，只要我们努力就能活出自己的路线，没有什么不可以也没有什么不可能的。我的',
                            createTime: '2020-12-24'

                        },
                        {
                            title: '每个人都有自己不同的人生',
                            intro: '做自己的CEO 文/李明 每个人都有自己不同的人生，我们是自己世界里的国王，别人的人生不代表自己的，只要我们努力就能活出自己的路线，没有什么不可以也没有什么不可能的。我的'
                        , createTime: '2020-12-24'
                        },
                        {
                            title: '每个人都有自己不同的人生',
                            intro: '做自己的CEO 文/李明 每个人都有自己不同的人生，我们是自己世界里的国王，别人的人生不代表自己的，只要我们努力就能活出自己的路线，没有什么不可以也没有什么不可能的。我的'
                            , createTime: '2020-12-24'
                        },
                        {
                            title: '每个人都有自己不同的人生',
                            intro: '做自己的CEO 文/李明 每个人都有自己不同的人生，我们是自己世界里的国王，别人的人生不代表自己的，只要我们努力就能活出自己的路线，没有什么不可以也没有什么不可能的。我的'
                            , createTime: '2020-12-24'
                        },
                        {
                            title: '每个人都有自己不同的人生',
                            intro: '做自己的CEO 文/李明 每个人都有自己不同的人生，我们是自己世界里的国王，别人的人生不代表自己的，只要我们努力就能活出自己的路线，没有什么不可以也没有什么不可能的。我的'
                            , createTime: '2020-12-24'
                        },
                        {
                            title: '每个人都有自己不同的人生',
                            intro: '做自己的CEO 文/李明 每个人都有自己不同的人生，我们是自己世界里的国王，别人的人生不代表自己的，只要我们努力就能活出自己的路线，没有什么不可以也没有什么不可能的。我的'
                            , createTime: '2020-12-24'
                        },
                        {
                            title: '每个人都有自己不同的人生',
                            intro: '做自己的CEO 文/李明 每个人都有自己不同的人生，我们是自己世界里的国王，别人的人生不代表自己的，只要我们努力就能活出自己的路线，没有什么不可以也没有什么不可能的。我的'
                            , createTime: '2020-12-24'
                        },
                        {
                            title: '每个人都有自己不同的人生',
                            intro: '做自己的CEO 文/李明 每个人都有自己不同的人生，我们是自己世界里的国王，别人的人生不代表自己的，只要我们努力就能活出自己的路线，没有什么不可以也没有什么不可能的。我的'
                            , createTime: '2020-12-24'
                        },
                        {
                            title: '每个人都有自己不同的人生',
                            intro: '做自己的CEO 文/李明 每个人都有自己不同的人生，我们是自己世界里的国王，别人的人生不代表自己的，只要我们努力就能活出自己的路线，没有什么不可以也没有什么不可能的。我的'
                            , createTime: '2020-12-24'
                        },
                        {
                            title: '每个人都有自己不同的人生',
                            intro: '做自己的CEO 文/李明 每个人都有自己不同的人生，我们是自己世界里的国王，别人的人生不代表自己的，只要我们努力就能活出自己的路线，没有什么不可以也没有什么不可能的。我的'
                            , createTime: '2020-12-24'
                        },
                        {
                            title: '每个人都有自己不同的人生',
                            intro: '做自己的CEO 文/李明 每个人都有自己不同的人生，我们是自己世界里的国王，别人的人生不代表自己的，只要我们努力就能活出自己的路线，没有什么不可以也没有什么不可能的。我的'
                            , createTime: '2020-12-24'
                        },
                        {
                            title: '每个人都有自己不同的人生',
                            intro: '做自己的CEO 文/李明 每个人都有自己不同的人生，我们是自己世界里的国王，别人的人生不代表自己的，只要我们努力就能活出自己的路线，没有什么不可以也没有什么不可能的。我的'
                            , createTime: '2020-12-24'
                        }
                    ],
                    page: 1,
                    pageSize: 10,
                    total: 0
                }
            }
        },
        methods: {
            getList() {
                const params = {
                    articleType:this.params.id,
                    page: this.table.page,
                    pageSize: this.table.pageSize,
                    keyword: this.params.keyword
                }
                Api.list(params).then(res => {
                    this.table.list = res.data
                    this.table.total = res.total
                })

            },
            goDetail(row) {
                this.$router.push({
                    path: `/detail/${row.id
                    }`,
                })

            }
        }
    }
</script>

<style lang="scss">
    .content-box {
        min-height: 60vh;

        .item {
            height: 100px;
            margin-bottom: 10px;
            .img {
               height: 100%;
                width: 100%;
                cursor: pointer;
                .el-image__error {
                    width: 100%;
                }
            }
            .title {
                font-weight: bold;
                margin-bottom: 5px;
                &:hover {
                    cursor: pointer;
                    color: #00b7ee;
                }
            }
            &>div{
                height: 100%;
                overflow: hidden;
            }
            .content {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                margin-bottom: 5px;
                font-size: 14px;
                &:hover {
                    text-decoration: underline;
                    cursor: pointer;
                }
            }
            .data {
                text-align: right;
                padding-right: 20px;
            }
        }
    }
</style>